<template>
  <h1>新闻列表</h1>
  <h2 @click="viewArticle">1.中方对美加征84%关税正式生效</h2>
  <router-link :to="{ name: 'article', params: { id: 2, title: '特朗普暂缓关税专家曾预言他会屈服' } }">
    <h2>2.特朗普暂缓关税专家曾预言他会屈服</h2>
  </router-link>
  <router-link :to="{ name: 'article', params: { id: 3 } }">
    <h2>3.滥施关税有什么下场</h2>
  </router-link>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转至article页
function viewArticle() {
  router.push({
    name: "article",
    params: {
      id: 1,
      title: "中方对美加征84%关税正式生效"
    }
  })
}
</script>

<style>
h2 {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}
</style>